<template>
  <div class="stars">
    <span class="iconfont icon-star" :class="{active: starNum >= 1}"></span>
    <span class="iconfont icon-star" :class="{active: starNum >= 2}"></span>
    <span class="iconfont icon-star" :class="{active: starNum >= 3}"></span>
    <span class="iconfont icon-star" :class="{active: starNum >= 4}"></span>
    <span class="iconfont icon-star" :class="{active: starNum >= 5}"></span>
  </div>
</template>

<script>
export default {
  name: 'Stars',
  props: {
    starNum: {
      type: Number,
      default: 5
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';

.stars {
  display: flex;
  align-items: center;
  color: #ccc;
  .active {
    color: $defaultBgColor;
  }
}
</style>